@import "../my-theme/info.less";


.home-content{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex: 5;
  min-height: 530px;
  padding: 20px 40px;
  div.card{
    padding: 15px 20px;
  }
  .home-left{
    margin-right: 30px;
    flex: 5;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    .home-info{
     .home-info-top{
       display: -webkit-box;
       display: -moz-box;
       display: -ms-flexbox;
       display: -webkit-flex;
       display: flex;
       position: relative;
       z-index: 1;
       .home-header{
         width: 100px;
         .home-header-img{
           margin: 0 auto;
           width: 67px;
           height: 67px;
           border-radius: 67px;
           display: block;
           overflow: hidden;
           position: relative;
           background: #f1f1f1 url("../assets/teacher/defaultHeader.png") no-repeat center;
           background-size: 100%;
           img{
             position: absolute;
             max-width: 100%;
             max-height: 100%;
             left: 50%;
             top: 50%;
             transform: translate3d(-50%,-50%,0);
           }
           .home-header-user{
             background: #f1f1f1;
             height: 100%;
           }
         }
       }
       .home-detail{
          flex: 5;
          font-size: 14px;
          padding-top: 3px;
          .home-tag{
            background-image: -webkit-gradient(linear,left 0,right 0,from(@purple-color),to(@primary-color));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 18px;
          }
         .home-detail-text{
           margin-top: 8px;
           i{
             color: @orange-color;
           }
         }
       }
     }
      .home-info-mid{
        display: -webkit-box;
        display: -moz-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        position: relative;
        z-index: 1;
        padding: 30px 0;
        span{
          display: block;
          width: 88px;
          padding-left: 17px;
        }
        .home-progress{
          flex:5;
          position: relative;
          height: 19px;
          padding: 3.5px 0;
          margin-right: 26px;
          .home-progress-main{
            background: #d2dade;
            padding: 2px;
            border-radius: 6px;
            height: 12px;
            position: relative;
            .progress-bar{
              overflow: hidden;
              height: 8px;
              border-radius: 4px;
              transition: all 2s linear;
              position: relative;
              background-image: url("../assets/teacher/progress.png");
              background-repeat: no-repeat;
            }
            .progress-first{
              position: absolute;
              top: 50%;
              transform: translate3d(-50%,-50%,0);
              .progress-tag{
                height: 16px;
                width: 50px;
                text-align: center;
                position: relative;
                line-height: 14px;
                background: #917acd;
                color: #fff;
                font-size: 10px;
                border-radius: 1px;
                &:after{
                  content: '';
                  height: 0;
                  width: 0;
                  position: absolute;
                  bottom: -3px;
                  left: 50%;
                  transform: translateX(-50%);
                  border-top: 4px solid #917acd;
                  border-left: 6px solid transparent;
                  border-right: 6px solid transparent;
                }
              }
              .progress-line{
                height: 23px;
                width: 1px;
                margin: 0 auto;
                background: #917acd;
              }
              .progress-grade{
                color: #917acd;
                text-align: center;
              }
            }
            .progress-second{
              position: absolute;
              top: 50%;
              transform: translate3d(-50%,-50%,0);
              .progress-tag{
                height: 16px;
                width: 50px;
                text-align: center;
                position: relative;
                line-height: 14px;
                background: #80e398;
                color: #fff;
                font-size: 10px;
                border-radius: 1px;
                &:after{
                  content: '';
                  height: 0;
                  width: 0;
                  position: absolute;
                  bottom: -3px;
                  left: 50%;
                  transform: translateX(-50%);
                  border-top: 4px solid #80e398;
                  border-left: 6px solid transparent;
                  border-right: 6px solid transparent;
                }
              }
              .progress-line{
                height: 23px;
                width: 1px;
                margin: 0 auto;
                background: #80e398;
              }
              .progress-grade{
                color: #80e398;
                width: 38px;
                text-align: center;
              }
            }
          }

        }


      }
      .home-info-bottom{
        position: relative;
        z-index: 1;
        padding-left: 35px;
        padding-right: 26px;
        background: url("../assets/teacher/laba.png") no-repeat 15px center;
        height: 40px;
        overflow: hidden;
        ul{
          position: relative;
          &.anim{
           transition: all 0.5s linear;
           margin-top: -40px;
         }
          li{
            line-height: 40px;
            a{
              display: -webkit-box;
              display: -moz-box;
              display: -ms-flexbox;
              display: -webkit-flex;
              display: flex;
              justify-content: space-between;
              &:hover{
                color: @primary-color;
              }
              p{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                -webkit-box-flex: 5;
                -webkit-flex: 5;
                flex: 5;
                max-width: 320px;
              }
              span{
                display: block;
              }
            }
          }
        }
      }
      .home-info-nav{
        border-top: 1px solid #d2dade;
        padding-top: 20px;
        position: relative;
        z-index: 1;
        ul{
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          li{
            flex:5;
            text-align: center;
            color: @primary-color;
            cursor: pointer;
            transition: color .2s;
            a,.home-nav-link{
              width: 80px;
              display: block;
              margin: 0 auto;
              height: 60px;
              border-radius: 7px;
              &:hover{
                background: rgba(94,133,200,.2);
              }
              &:active{
                background: rgba(94,133,200,.3);
              }
            }
            .home-nav-icon{
              height: 35px;
              position: relative;
              width: 100%;
              transition: transform .2s;
              i{
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate3d(-50%,-50%,0);
                line-height: 1;
              }

            }
            //&:hover{
            //  color: tint(@primary-color, 20%);
            //}
            //&:active{
            //  color: shade(@primary-color, 20%);
            //  .home-nav-icon{
            //    transform: scale(.95);
            //  }
            //}
            &:nth-of-type(1){
              .home-nav-icon{
                background: url('../assets/teacher/homeNav1.png') no-repeat center;
              }
            }
            &:nth-of-type(2){
              .home-nav-icon{
                background: url('../assets/teacher/homeNav2.png') no-repeat center;
              }
            }
            &:nth-of-type(3){
              .home-nav-icon{
                background: url('../assets/teacher/homeNav3.png') no-repeat center;
              }
            }
            &:nth-of-type(4){
              .home-nav-icon{
                background: url('../assets/teacher/homeNav4.png') no-repeat center;
              }
            }
            &:nth-of-type(5){
              .home-nav-icon{
                background: url('../assets/teacher/homeNav5.png') no-repeat center;
              }
            }
          }
        }
      }
    }
    .home-class-tip{
      flex: 5;
      margin-top: 20px;
      min-height: 174px;
      display: flex;
      padding: 0;
      .home-class-tip-main{
        flex: 5;
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        h2{
          font-size: 14px;
          margin-bottom: 5px;
          padding: 15px 20px 0;
        }
        .home-class-tip-table{
          flex: 5;
          overflow-y: auto;
          padding: 0 20px 15px;
          display: flex;
        }
        table{
          width: 100%;
          border-collapse:separate;
          border-spacing:0px 12px;
          tr{
            &.active{
              td{
                color: @error-color;
                white-space:nowrap;
                &:first-child{
                  &:before{
                    background: @error-color;
                  }
                }
              }
            }
            td{
              position: relative;
              line-height: 28px;
              font-size: 14px;
              margin-bottom: 12px;
              text-align: center;
              padding: 0 5px;
              &:first-child{
                padding-left: 10px;
                &:before{
                  content: '';
                  position: absolute;
                  width: 2px;
                  height: 11px;
                  left: 0;
                  top: 50%;
                  -webkit-transform: translateY(-50%);
                  -moz-transform: translateY(-50%);
                  -ms-transform: translateY(-50%);
                  -o-transform: translateY(-50%);
                  transform: translateY(-50%);
                  background: @mid-gray-color;
                }
              }
              &:first-child,&:last-child{
                text-align: left;
              }
            }
          }
        }
      }
    }
  }
  .home-right{
    flex: 5;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    background: #e6f4ff;
    .home-date{
      padding: 15px 37px;
      .home-date-main{
        position: relative;
        z-index: 1;
        .home-date-select{
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          display: flex;
          height: 24px;
          line-height: 24px;
          h2{
            flex: 5;
            color: #73676b;
            font-size: 14px;
          }
          .home-class-date-btn{
            color: #4c4245;
            font-size: 14px;
            &>div{
              display: inline-block;
            }
            .ivu-icon-ios-arrow-up,.ivu-icon-ios-arrow-down{
              font-size: 20px;
            }
            .ivu-icon-ios-arrow-up{
              margin-right: 12px;
            }
            .ivu-icon-chevron-up{
              margin-right: 8px;
            }
            .ivu-icon{
              cursor: pointer;
              &:hover{
                color: tint(#4c4245, 20%);
              }
              &:active{
                color: shade(#4c4245, 5%);
              }
            }
          }
        }
        .home-date-picker{
          h3{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
            span{
              color: #73676b;
              display: block;
              width: 34px;
              text-align: center;
              height: 34px;
              font-size: 13px;
              line-height: 34px;
            }
          }
          p{
            display: -webkit-box;
            display: -moz-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
            span{
              color: #73676b;
              display: block;
              width: 34px;
              text-align: center;
              height: 34px;
              font-size: 14px;
              cursor: pointer;
              line-height: 34px;
              position: relative;
              border-radius: 50%;
              &.un{
                cursor: not-allowed;
                opacity: .2;
              }
              &.no{
                cursor: not-allowed;
                opacity: .5;
                &:after{
                  content:'';
                  position: absolute;
                  width: 100%;
                  height: 1px;
                  left: 0;
                  top: 50%;
                  transform: translateY(-50%);
                  background: #73676b;
                  opacity: .5;
                }
              }
              &.picked{
                background: #ffe0db;
                color: @orange-color;
                &:after{
                  content:'';
                  position: absolute;
                  width: 0;
                  height: 0;
                  left: 50%;
                  bottom: -6px;
                  transform: translateX(-50%);
                  border-bottom: 4px solid #ffe0db;
                  border-left: 4px solid transparent;
                  border-right: 4px solid transparent;
                }
              }
            }
          }
        }
      }

    }
    .home-class-list{
      flex: 5;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      box-shadow: 3px 3px 7px rgba(160,131,137,.35);
      position: relative;
      min-height: 198px;
      display: flex;
      .home-class-list-main{
        position: relative;
        z-index: 1;
        display: flex;
        flex-direction: column;
        padding: 0;
        flex: 5;
        h3{
          display: -webkit-box;
          display: -moz-box;
          display: -ms-flexbox;
          display: -webkit-flex;
          justify-content: space-between;
          margin-bottom: 10px;
          padding: 20px 37px 0;
          strong{
            color: @orange-color;
          }
          span{
            color: #8e96a5;
            em{
              display: inline-block;
              position: relative;
              padding-left: 20px;
              &:before{
                content: '';
                width: 6px;
                height: 6px;
                position: absolute;
                left: 9px;
                top: 50%;
                transform: translateY(-50%);
                border-radius: 50%;
              }
              &:nth-child(1){
                &:before{
                  background: #ed9d40;
                }
              }
              &:nth-child(2){
                &:before{
                  background: #86d2b1;
                }
              }
            }
          }
        }
        .home-class-list-table{
          flex: 5;
          overflow-y: auto;
          display: flex;
          padding: 0 37px 15px;
        }
        table{
          width: 100%;
          td{
            font-size: 14px;
            line-height: 35px;
            height: 35px;
            min-width: 50px;
            text-align: center;
            padding: 0 5px;
            white-space:nowrap;
            &:first-child,&:last-child{
              text-align: left;
            }
            i{
              width: 1px;
              height: 35px;
              background: #d2dade;
              position: relative;
              display: block;
              margin: 0 auto;
              &:after{
                content: '';
                position: absolute;
                border-radius: 50%;
                width: 9px;
                height: 9px;
                left: -4px;
                top: 50%;
                transform: translateY(-50%);
              }
              &.orange{
                &:after{
                  background: #ed9d40;
                }
              }
              &.green{
                &:after{
                  background: #86d2b1;
                }
              }
            }
          }
        }
      }
    }
  }
  .home-video{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(55,55,55,0.6);
    z-index: 4;
    .home-video-main{
      width: 60%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding-top: 35%;
      min-height: 450px;
      .home-video-wrap{
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        .video-player{
          width: 100%;
          height: 100%;
          position: relative;
          button{
            outline: none;
          }
          .video-js{
            width: 100%;
            height: 100%;
            .vjs-big-play-button{
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
            }
            .vjs-button > .vjs-icon-placeholder:before{
              font-size: 20px;
              line-height: 36px;
            }
            .vjs-playback-rate .vjs-playback-rate-value{
              font-size: 14px;
              line-height: 36px;
            }
          }
        }
        .video-close{
          position: absolute;
          right: -30px;
          top: 0;
          color: #fff;
          font-size: 20px;
          line-height: 1;
          cursor: pointer;
          &:hover{
            color: #d4d4d4;
          }
          &:active{
            color: #cccccc;
          }
        }
      }
    }
  }
}
